import type Experience from "../Experience";

/**
 * 车辆时间线组件
 * 显示车辆特性的垂直时间线导航
 */
export default class CarTimeline {
  base: Experience;
  container: HTMLDivElement;
  activeIndex: number = 0;

  // 时间线数据
  timelineItems = [
    { id: "su7", label: "SU7" },
    { id: "body", label: "车身" },
    { id: "windResistance", label: "风阻" },
    { id: "radar", label: "雷达" },
    { id: "custom", label: "定制" },
  ];

  constructor(base: Experience) {
    this.base = base;

    // 创建时间线容器
    this.container = document.createElement("div");
    this.container.className = "car-timeline";

    // 创建时间线线条
    const line = document.createElement("div");
    line.className = "timeline-line";
    this.container.appendChild(line);

    // 创建时间线项目
    this.timelineItems.forEach((item, index) => {
      const itemEl = document.createElement("div");
      itemEl.className = "timeline-item";
      itemEl.dataset.id = item.id;

      // 创建圆点
      const dot = document.createElement("div");
      dot.className = "timeline-dot";

      // 创建外圈（用于激活状态）
      const outerRing = document.createElement("div");
      outerRing.className = "timeline-outer-ring";
      dot.appendChild(outerRing);

      // 创建内圆点
      const innerDot = document.createElement("div");
      innerDot.className = "timeline-inner-dot";
      dot.appendChild(innerDot);

      // 创建标签
      const label = document.createElement("span");
      label.className = "timeline-label";
      label.textContent = item.label;
 itemEl.appendChild(label);
      itemEl.appendChild(dot);
     

      // 添加点击事件
      itemEl.addEventListener("click", () => {
        this.setActive(index);
      });

      this.container.appendChild(itemEl);
    });

    // 初始隐藏
    this.container.style.opacity = "0";

    // 添加到 DOM
    document.body.appendChild(this.container);

    // 默认激活第一个
    this.setActive(0);
  }

  /**
   * 设置激活项
   */
  setActive(index: number) {
    if (index < 0 || index >= this.timelineItems.length) return;

    this.activeIndex = index;

    // 移除所有激活状态
    const items = this.container.querySelectorAll(".timeline-item");
    items.forEach((item) => item.classList.remove("active"));

    // 设置当前激活状态
    items[index].classList.add("active");

    // 触发自定义事件，通知其他组件
    const event = new CustomEvent("timeline-change", {
      detail: {
        index,
        item: this.timelineItems[index],
      },
    });
    window.dispatchEvent(event);

    console.log(`Timeline activated: ${this.timelineItems[index].label}`);
  }

  /**
   * 显示时间线（带淡入动画）
   */
  show() {
    setTimeout(() => {
      this.container.style.transition = "opacity 1s ease";
      this.container.style.opacity = "1";
    }, 500);
  }

  /**
   * 隐藏时间线
   */
  hide() {
    this.container.style.transition = "opacity 0.5s ease";
    this.container.style.opacity = "0";
  }

  /**
   * 销毁组件
   */
  destroy() {
    this.container.remove();
  }
}
